﻿@using MML.Helpers.Knockout;
@model AppSCO.Models.citaModel
@{
    ViewBag.Title = "reprogramaCita";
    var ko = Html.CreateKnockoutContext();
}

<h1>REPROGRAMAR CITA</h1>
<ul class="tabs">
    <li id="tb1"><a href="#tab1">VERIFICAR</a></li>
    <li id="tb2"><a href="#tab2">REPROGRAMAR</a></li>
</ul>
    <div class="tab_container">
        <div id="tab1" class="tab_content">
            <div data-bind="with: datosCita">
                <table class="formulario"  style="width:400px;">
                    <tr>
                        <td>@Html.LabelFor(c=>c.datosCita.TIPPAG)</td>
                        <td>
                            <input type="radio" data-bind="checked: TIPPAG" value="B" name="TP" />BANCO NACION&nbsp;&nbsp;&nbsp;&nbsp;
                        </td>
                    </tr>
                    <tr>
                        <td>@Html.LabelFor(c=>c.datosCita.NUMDOCPAG)</td>
                        <td><input id="NUMDOCPAG" name="NUMDOCPAG" style="width:200px;" data-bind="value: NUMDOCPAG" type="text" /></td>
                    </tr>
                </table>
                <div style="text-align:right;width:367px;">
                    <button data-bind="click: viewModel.validarDatosCita">CONTINUAR</button>
                </div>
            </div>
        </div>
        <div id="tab2" class="tab_content">
            
            <div data-bind="with: datosCita">
                <fieldset>
                    <legend>INFORMACION</legend>
                    <table class="info">
                        <tr>
                            <td>@Html.LabelFor(c=>c.datosCita.NOMPAC)</td>
                            <td><span data-bind="text: NOMPAC"></span></td>
                        </tr>
                        <tr>
                            <td><label>APELLIDOS</label></td>
                            <td><span data-bind="text: APEPPAC"></span>&nbsp;<span data-bind="text: APEMPAC"></span></td>
                        </tr>
                        <tr>
                            <td><label>EMPRESA / OCUPACION</label></td>
                            <td><span data-bind="text: NOMEMP"></span>&nbsp;/&nbsp;<span data-bind="text: NOMOCU"></span></td>
                        </tr>
                        <tr>
                            <td>@Html.LabelFor(c=>c.datosCita.FECCITA)</td>
                            <td><span data-bind="text: FECCITA"></span></td>
                        </tr>
                        <tr>
                            <td>@Html.LabelFor(c=>c.datosCita.DESHOR)</td>
                            <td><span data-bind="text: DESHOR"></span></td>
                        </tr>
                    </table>
                </fieldset>
                <table class="formulario" style="width:600px;">
                    <tr>
                        <td style="width:120px;">@Html.LabelFor(c => c.datosCita.FECCITA_REPRO)</td>
                        <td><input id="FEC" name="FEC" style="width:100px;" data-bind="value: FECCITA_REPRO" type="text" />&nbsp;&nbsp;<button data-bind="click: viewModel.verDisponibilidad">BUSCAR</button></td>
                    </tr>
                </table><br />
                <table class="grilla" style="width:600px;">
                    <thead>
                        <tr>
                            <th>HORARIO</th>
                            <th>CUPOS</th>
                            <th>ESTADO</th>
                            <th>SELECT</th>
                        </tr>
                    </thead>
                    <tbody data-bind="foreach: listaHorario">
                        <tr>
                            <td><span data-bind="text: DESHOR"></span></td>
                            <td><span data-bind="text: CUP"></span></td>
                            <td><span data-bind="text: DESCUP"></span></td>
                            <td><input type="radio" data-bind="value: CODHOR, checked: viewModel.HORSELECT" name="DISP" /></td>
                        </tr>
                    </tbody>
                    <tfoot data-bind="visible: viewModel.dontResult">
                        <tr>
                            <td colspan="4">NO SE ENCONTRARON HORARIOS DISPONIBLES</td>
                        </tr>
                    </tfoot>
                </table><br />
                <div style="text-align:center;">
                    <button data-bind="click: viewModel.reprogramarCita">REPROGRAMAR CITA</button>
                </div>
            </div><br />
        </div>
    </div>

@ko.Initialize(Model)
<script type="text/javascript">
    var urlDatosCitaGenerada = '@Url.Action("datosCitaGenerada","citas")';
    var urlDisponibilidad = '@Url.Action("listarDisponibilidadReprogramacion","citas")';
    var urlReprogramarCita = '@Url.Action("reprogramarCita","citas")';
    var urlVerFicha = '@Url.Action("cita","file")';

    viewModel.validarDatosCita = function () {
        var param = ko.toJSON(viewModel.datosCita);
        $.ajax({
            url: urlDatosCitaGenerada,
            type: "POST",
            async: true,
            data: param,
            contentType: "application/json",
            success: function (result) {
                if (result.datoCita == null) {
                    alert("Usted no tiene una cita programada verifique y vuelva a intentarlo.");
                } else {
                    Navigate("tb1", "tb2");
                    ko.mapping.fromJS(result.datoCita, {}, viewModel.datosCita);
                }
            },
            error: msgError
        });
    }

    viewModel.dontResult = ko.observable(true);
    viewModel.verDisponibilidad = function () {
        var param = ko.toJSON(viewModel.datosCita);
        $.ajax({
            url: urlDisponibilidad,
            type: "POST",
            async: true,
            data: param,
            contentType: "application/json",
            success: function (result) {
                ko.mapping.fromJS(result.datosDisponibilidad, {}, viewModel.datosCita.listaHorario);
                viewModel.dontResult(false);
            },
            error: msgError
        });
    }

    viewModel.HORSELECT = ko.observable();
    viewModel.reprogramarCita = function () {
        viewModel.datosCita.CODHOR(viewModel.HORSELECT());
        var param = ko.toJSON(viewModel.datosCita);
        $.ajax({
            url: urlReprogramarCita,
            type: "POST",
            async: true,
            data: param,
            contentType: "application/json",
            success: function (result) {
                if (result.datoCita == null) {
                    alert("No se pudo reprogramar su cita. Por favor intentelo mas tarde.");
                } else {
                    alert(result.mensaje);
                    openPopup(urlVerFicha + "?Id=" + viewModel.datosCita.CODCIT(), "", 750, 600);
                    ko.mapping.fromJS(viewModelJs, {}, viewModel);
                }
            },
            error: msgError
        });
    }

    $(function () {
        var fechaActual = new Date();
        fechaActual = fechaActual.Add("D", 1);
        $("#FEC").datepicker({
            minDate: $.datepicker.parseDate('yymmdd', fechaActual.formatDate("yyyyMMdd")),
            beforeShowDay: function (day) {
                var day = day.getDay();
                if (day == 0 || day == 6) return [false, "somecssclass"]
                else return [true, "someothercssclass"]
            }
        });
    });

</script>
@ko.Apply(Model);